<template>
	<div class="index_main ">
		<div class="index_mainleft">
			<div class="index_mainleftP1">
				疾病种类目录
				<div class="r">
					<el-dropdown @command="handleControl">
						<div class="index_left_control like_btn">
							<i class="el-icon-s-operation"></i>
						</div>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="1">展开目录</el-dropdown-item>
							<el-dropdown-item command="2">收起目录</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</div>
			<div class="index_mainleftP6 beautifulScroll">
				<el-tree ref='tree' @node-click='handleDisease' :data="diseases" node-key="id" :props="classProps"
					:default-expand-all="expanded" :expand-on-click-node='false'>
					<div class="index_mainleftP7" :class="diseaseId == data.id ? 'active' : ''"
						slot-scope="{ node, data }">
						<div class="index_mainleftP8">
							<div class="text-ellipsis">{{ data.name }}</div>
							<div class="index_mainleftP9">({{ data.number || 0 }})</div>
						</div>
					</div>
				</el-tree>
			</div>
		</div>
		<div class="index_mainright beautifulScroll" v-loading="loading">
			<div class="index_mainsearch">
				<div class="content_filter clearfix">
					<div class="content_filtername">系统分类：</div>
					<div class="clearfix">
						<div @click="handleSystemId({ systemId: '' })" class="content_filteritem"
							:class="systemId == '' ? 'active' : ''">全部</div>
						<div @click="handleSystemId(item)" class="content_filteritem"
							:class="item.systemId == systemId ? 'active' : ''" v-for="(item, index) in systems"
							:key="item.systemId">{{ item.systemName }}</div>
					</div>
				</div>
				<div class="content_filter clearfix">
					<div class="content_filtername">检查方式：</div>
					<div class="clearfix">
						<div @click="handleModalityId({ modalityId: '' })" class="content_filteritem"
							:class="modalityId == '' ? 'active' : ''">全部</div>
						<div @click="handleModalityId(item)" class="content_filteritem"
							:class="item.modalityId == modalityId ? 'active' : ''" v-for="(item, index) in modalitys"
							:key="item.modalityId">{{ item.modalityName }}</div>
					</div>
				</div>
				<div class="content_filter clearfix">
					<div class="content_filtername">性别：</div>
					<div class="clearfix">
						<div @click="handleSex({ value: '' })" class="content_filteritem"
							:class="patientSex == '' ? 'active' : ''">全部</div>
						<div @click="handleSex(item)" class="content_filteritem"
							:class="item.value == patientSex ? 'active' : ''" v-for="(item, index) in patientSexs"
							:key="item.value">{{ item.label }}</div>
					</div>
				</div>
			</div>
			<div class="index_mainlist clearfix">
				<div class="index_mainlist_search clearfix">
					<el-input @keyup.enter.native="currentChange(1)" placeholder="请输入病例名称/编号" prefix-icon="el-icon-search" v-model="caseName" size='small'
						style="width:200px;margin: 0 10px 0 0;" clearable />
					<el-button type="primary" @click="currentChange(1)" size='small'>搜索</el-button>
					<el-button type="primary" @click="research" size='small'>重置</el-button>
					<div class="r">
						<el-dropdown @command="handleCommand">
							<div class="pointer">
								<span v-if="!sort">筛选</span>
								<span v-if="sort && sort == item.value" v-for='item in sorts'>{{ item.label }}</span>
								<i class="el-icon-caret-bottom"></i>
							</div>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item :command="item.value" v-for='item in sorts'>{{ item.label
								}}</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
				</div>
				<emptymain :emptytext="'暂无数据'" :emptyheight="'550px'" :emptylist='dataList'>
					<span></span>
				</emptymain>
				<div class="clearfix">
					<div class="case_item" @click.stop="openCase(item)" v-for="item in dataList">
						<div class="case_itemP1 text-ellipsis">{{ item.caseName }}</div>
						<div class="case_itemP2 clearfix">
							<div class="case_itemP3">{{ item.modalityName || '-' }}</div>
							<div class="case_itemP4">
								<div class="case_itemP5 text-ellipsis">{{ item.systemName }}</div>
								<div class="case_itemP6">
									<span class="case_sex_m" v-if="item.patientSex == 'M'">
										<i class="el-icon-male"></i>
									</span>
									<span class="case_sex_f" v-if="item.patientSex == 'F'">
										<i class="el-icon-female"></i>
									</span>
									<span class="case_itemP6span">{{ item.patientAge }}岁</span>
									<span>病历号:{{ item.number }}</span>
								</div>
							</div>
						</div>
						<div class="case_itemP7"><i class="el-icon-s-custom"></i>浏览人数:{{ item.viewNumber || 0 }}</div>
					</div>
				</div>
			</div>
			<div class="index_mainpages top">
				<el-pagination hide-on-single-page background @current-change="currentChange" :current-page="pageNum"
					:page-size="pageSize" layout="total,  prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
		</div>
		<div class="index_mask" v-show="showcase">
			<div class="ai_dio">
				<img src="@/images/ai_dioback.png" class="ai_dioback">
				<div class="ai_close like_btn" @click="closeCase"><i class="el-icon-close"></i></div>
				<div class="ai_tabs">
					<div class="ai_tab" :class="{ 'active': activeTab == 1 }" @click="activeTab = 1">
						<i class="el-icon-s-claim"></i>患者及病史信息
					</div>
					<div class="ai_tab" :class="{ 'active': activeTab == 2 }" @click="activeTab = 2"
						v-if="caseinfo.knowledgeGraph">
						<i class="el-icon-s-marketing"></i>知识图谱
					</div>
					<div class="ai_tab" :class="{ 'active': activeTab == 3 }" @click="activeTab = 3"
						v-if="caseinfo.knowledgePoint">
						<i class="el-icon-s-opportunity"></i>知识点
					</div>
				</div>
				<div class="ai_content" v-show="activeTab == 1">
					<div class="ai_content1">患者及病史信息</div>
					<div class="ai_content2 beautifulScroll">
						<div class="ai_content3 ">
							<el-row class='csae_dio_mainP1'>
								<el-col :span='8'>
									<div class="csae_dio_mainP2">
										<b>姓名：</b>{{ caseinfo.patientName }}
									</div>
								</el-col>
								<el-col :span='8'>
									<div class="csae_dio_mainP2">
										<b>年龄：</b>{{ caseinfo.patientAge }}岁
									</div>
								</el-col>
								<el-col :span='8'>
									<div class="csae_dio_mainP2">
										<b>性别：</b>{{ caseinfo.patientSex == "F" ? '女' : '男' }}
									</div>
								</el-col>
								<el-col :span='8'>
									<div class="csae_dio_mainP2">
										<b>病历号：</b>{{ caseinfo.number }}
									</div>
								</el-col>
								<el-col :span='8'>
									<div class="csae_dio_mainP2">
										<b>检查类型：</b><span v-for='item in modalitys'
											v-if='caseinfo.modalityId == item.modalityId'>{{ item.modalityName }}</span>
									</div>
								</el-col>
							</el-row>
							<el-row class='csae_dio_mainP1'>
								<el-col :span='24'>
									<div class="csae_dio_mainP2">
										<b>主诉：</b>{{ caseinfo.number }}
									</div>
								</el-col>
							</el-row>
							<el-row class='csae_dio_mainP1'>
								<el-col :span='24'>
									<div class="csae_dio_mainP2">
										<b>既往史：</b>{{ medicalHistory0.value || '无' }}
									</div>
								</el-col>
								<el-col :span='24'>
									<div class="csae_dio_mainP2">
										<b>家族史：</b>{{ medicalHistory1.value || '无' }}
									</div>
								</el-col>
								<el-col :span='24'>
									<div class="csae_dio_mainP2">
										<b>婚育史：</b>{{ medicalHistory2.value || '无' }}
									</div>
								</el-col>
								<el-col :span='24'>
									<div class="csae_dio_mainP2">
										<b>现病史：</b>{{ medicalHistory3.value || '无' }}
									</div>
								</el-col>
								<el-col :span='24'>
									<div class="csae_dio_mainP2">
										<b>个人史：</b>{{ medicalHistory4.value || '无' }}
									</div>
								</el-col>
							</el-row>
							<el-row class='csae_dio_mainP1 bottom'>
								<el-col :span='24'>
									<div class="csae_dio_mainP2">
										<b>附件：</b> {{ !caseinfo.application && !caseinfo.hospitalCase ? '无' : '' }}
										<el-button type='primary' size='small' @click="openImg('application')"
											v-if='caseinfo.application'>检查申请单</el-button>
										<el-button type='primary' size='small' @click="openImg('hospitalCase')"
											v-if='caseinfo.hospitalCase'>住院病例</el-button>
									</div>
								</el-col>
							</el-row>
						</div>
					</div>
				</div>
				<div class="ai_content" v-show="activeTab == 2">
					<div class="ai_content2 all">
						<knowledge :graphData="knowledgeGraph" v-if="showcase && activeTab == 2"></knowledge>
					</div>
				</div>
				<div class="ai_content" v-show="activeTab == 3">
					<div class="ai_content2 all">
						<knowledgepoint :knowledgePoint="knowledgePoints" v-if="showcase && activeTab == 3">
						</knowledgepoint>
					</div>
				</div>
				<div class="csae_dio_bottom">
					<el-button type='primary' @click='toCase'>查看影像</el-button>
				</div>
			</div>
		</div>
		<div class="index_mask" v-show='caseType'>
			<div class="csae_dio_cont auto">
				<div class="csae_dio_title">
					{{ caseType == 'application' ? '检查申请单' : '住院病例' }}
				</div>
				<div class="csae_dio_close like_btn" @click="closeImg">
					<i class="el-icon-close"></i>
				</div>
				<div class="csae_dio_main nobar">
					<img :src="baseurl + caseImg" class="csae_dio_mainimg" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { caseList, diseaseTree, systemList, caseInfo, collectCase } from '@/api/case.js'
import { modalityList } from '@/api/image.js'
import knowledge from './knowledge.vue'
import knowledgepoint from './knowledgepoint.vue'
export default {
	components: {
		knowledge,
		knowledgepoint
	},
	data() {
		return {
			dataList: [],
			loading: true,
			pageNum: 1,
			pageSize: 12,
			total: 0,
			sort: '',
			modalityId: '',
			systemId: '',
			diseaseId: '',
			diseaseIds: [],
			caseName: '',
			patientSex: '',
			modalitys: [],
			systems: [],
			diseases: [],
			expanded: false,
			sorts: [{
				value: "1",
				label: '浏览人数由多到少'
			}, {
				value: "2",
				label: '浏览人数由少到多'
			}, {
				value: "3",
				label: '我收藏的'
			}],
			classProps: {
				value: 'id',
				label: 'name',
			},
			patientSexs: [{
				value: "M",
				label: '男'
			}, {
				value: "F",
				label: '女'
			}],

			showcase: false,
			medicalHistory0: {
				label: '既往史',
				value: ''
			},
			medicalHistory1: {
				label: '家族史',
				value: ''
			},
			medicalHistory2: {
				label: '婚育史',
				value: ''
			},
			medicalHistory3: {
				label: '现病史',
				value: ''
			},
			medicalHistory4: {
				label: '个人史',
				value: ''
			},
			caseinfo: {},
			caseImg: '',
			caseType: '',
			activeTab: 1,
			knowledgeGraph: [],
			knowledgePoints: [],
		}
	},
	created() {
		this.getModalityList()
		this.getSystemList()
		this.getDiseaseList()
		this.getDataList()
	},
	mounted() {

	},
	methods: {
		markdownConverted(content) {
			if (!content) return '';
			return marked.parse(content);
		},
		closeImg() {
			this.caseImg = '';
			this.caseType = '';
		},
		openImg(type) {
			this.caseType = type;
			this.caseImg = this.caseinfo[type];
		},
		toCase() {
			const routeUrl = this.$router.resolve({
				name: 'caseimage',
				query: {
					caseId: this.caseinfo.caseId,
				}
			})
			window.open(routeUrl.href, '_blank')
			this.closeCase()
		},
		closeCase() {
			var that = this;
			this.showcase = false
			this.caseinfo = {};
			for (var i = 0; i < 5; i++) {
				that['medicalHistory' + i].value = ''
			}
		},
		openCase(item) {
			caseInfo({
				caseId: item.caseId
			}).then(res => {
				this.caseinfo = res.data || {};
				if (this.caseinfo.medicalHistory) {
					var medicalHistory = JSON.parse(this.caseinfo.medicalHistory);
					medicalHistory.map(item => {
						this[item.name] = item
					})
				}
				try {
					this.knowledgeGraph = this.caseinfo.knowledgeGraph ? JSON.parse(this.caseinfo.knowledgeGraph) : []
					this.knowledgePoints = this.caseinfo.knowledgePoint ? JSON.parse(this.caseinfo.knowledgePoint) : []
				} catch (error) {

				}
				this.activeTab = 1;
				this.showcase = true
			})
		},
		checkCollect(item, collect) {
			collectCase({
				caseId: item.caseId,
				collect
			}).then(res => {
				if (res.code == 200) {
					this.getDataList()
				} else {
					this.$message({
						type: 'error',
						message: res.message
					})
				}
			})
		},
		getSystemList() {
			systemList({
				pageNum: 1,
				pageSize: 500,
			}).then(res => {
				this.systems = res.data.list;
			})
		},
		getModalityList() {
			modalityList({}).then(res => {
				this.modalitys = res.data || [];
			})
		},
		getDiseaseList() {
			diseaseTree({
				systemId: this.systemId,
			}).then(res => {
				this.diseases = res.data || [];
			})
		},
		getChildrenId(arrs, putArr) {
			arrs.map(item => {
				putArr.push(item.id);
				if (item.children && item.children.length > 0) {
					this.getChildrenId(item.children, putArr)
				}
			})
			return putArr
		},
		handleModalityId(item) {
			if (this.modalityId != item.modalityId) {
				this.modalityId = item.modalityId;
			} else {
				this.modalityId = ''
			}
			this.currentChange(1)
		},
		handleSystemId(item) {
			if (this.systemId != item.systemId) {
				this.systemId = item.systemId;
			} else {
				this.systemId = ''
			}
			this.diseaseId = '';
			this.diseaseIds = [];
			this.getDiseaseList()
			this.currentChange(1)
		},
		handleSex(item) {
			if (this.patientSex != item.value) {
				this.patientSex = item.value;
			} else {
				this.patientSex = ''
			}
			this.currentChange(1)
		},
		handleDisease(item) {
			if (this.diseaseId != item.id) {
				this.diseaseId = item.id;
				var diseaseIds = [];
				this.diseaseIds = this.getDiseaseIdd(diseaseIds, item);
				this.currentChange(1)
			}
		},
		getDiseaseIdd(diseaseIds, item) {
			diseaseIds.push(item.id)
			if (item.children && item.children.length > 0) {
				item.children.map(it => {
					this.getDiseaseIdd(diseaseIds, it);
				})
			}
			return diseaseIds
		},
		handleControl(sort) {
			if (sort == 1) {
				const nodes = this.$refs.tree.store._getAllNodes();
				nodes.forEach(item => {
					item.expanded = true
				})
			}
			if (sort == 2) {
				const nodes = this.$refs.tree.store._getAllNodes();
				nodes.forEach(item => {
					item.expanded = false
				})
			}
		},
		handleCommand(sort) {
			this.sort = sort;
			this.getDataList();
		},
		research() {
			this.modalityId = ''
			this.systemId = ''
			this.patientSex = ''
			this.caseName = ''
			this.sort = ''
			this.currentChange(1)
		},
		currentChange(pageNum) {
			this.pageNum = pageNum;
			this.getDataList()
		},
		getDataList() {
			this.loading = true;
			caseList({
				modalityId: this.modalityId,
				systemId: this.systemId,
				caseName: this.caseName,
				diseaseId: this.diseaseIds.join(','),
				patientSex: this.patientSex,
				sort: this.sort,
				pageNum: this.pageNum,
				pageSize: this.pageSize,
			}).then(async res => {
				this.dataList = res.data.list;
				this.total = res.data.total;
			}).finally(() => {
				this.loading = false;
			})
		},
	},
}
</script>